<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>企业离退人员养老金发放银行变更申请表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../../layui/css/layui.css">


	<style lang="">
		 body{
            background-color: #fff;
        }
		input{
			border: none;
		}
		 .ok-body {
            width: 100%;
            height: 100%;

        }
        .frmBox{
            width: 90%;
            position: absolute;
            top: 0;left: 0;
            right: 0;
            bottom: 0;
            margin: auto auto;
            /* background-color: pink; */

        }
        .submitForm{
            width: 100%;
            position: absolute;
            top: 0;left: 0;
            right: 0;
            bottom: 0;
            margin: auto auto;
            display:flex;
            justify-content: top;
            align-items: center;
            flex-direction: column;
            /* background-color: gold; */
        }
        table{
        width: 680px;
        margin-top: 30px;
    }
    h2{
        margin-top: 5%;
        margin-bottom: 5%;
    }
		.bankBox {
			width: 400px;
			height: 200px;
			/* background-color: red; */
			display: flex;
			justify-self: center;
			align-items: center;
			flex-wrap: wrap;
		}

		.bankBox p {
			margin-left: 50px;
		}

		.date {
			width: 100px;
			height: 20px;
			display: flex;
			justify-content: right;
			align-items: right;
			margin-left: 80%;
		}

		.date p {
			margin-left: 10px;
		}

		.contentBox {
			width: 100%;
			height: 100%;

		}

		.contentBox p {
			font-size: 18px;
		}

		.contentBox h2 {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.contentBox .container {
			display: flex;
			justify-content: left;
		
			flex-direction: column;
			line-height: 10px;
			margin-left: 6%;
		}

		.contentBox .container p {
			letter-spacing: 2px;
			line-height: 40px;
		}

		.contentBox .footer {

			position: relative;
			height: 100px;
		}

		.last {
			height: 50%;
		}

		.p1 {
			/* margin-left: -480px; */
			margin-top: 4%;
			margin-bottom: 4%;
		}

		.txt1 {
			/* margin-left: -80px; */
			letter-spacing: 3px;
		}

		.txt2 {
			/* margin-left: -500px; */
			letter-spacing: 3px;
			margin-right: 65%;

		}

		.p2 {
			float: right;
			margin-right: 20%;
		}

		.p3 {
			float: left;
			margin-left: 6%;

		}

		.p4 {
			position: absolute;
			top: 23%;
			right: 10%;
			margin-top: 20px;
		}

		h2 {
			margin-bottom: 20px;
		}

		td {
			height: 40px;
			text-align: center;
		}

		
		.btn_box{
			margin-top: 40px;
            margin-bottom: 20px;
        }
		#btnPrint{
        background-color: #2f81ff;
        margin-right: 30px;
		}
		#btnBack{
			background-color: #ff8400;
		}
		#ftBox{
			position:absolute;
			top:80%;
			bottom: 0px;
			right:0px;
			left: 8%;
		}
		.image{
			position:relative;
		}
		#bg{
			position:absolute;
			top:10%;
			bottom: 0px;
			right: 6%;
			left: 0px;
			margin: 10px -40px;
		}

	</style>

<style media="print">
    @page {
            size: auto;  /* auto is the initial value */
            margin:0mm; /* this affects the margin in the printer settings */
        }
    </style>
</head>

<body>
	<div id="outBox">
		<div class="image" id="a">

		</div>
		<div class="ok-body" id="priBox">
			<div class="frmBox">
				<form id="submitForm" class="submitForm">
					<table class=" table-hover">
						<thead>
							<caption style=" caption-side: top;">
								<h2>企业离退人员养老金发放银行变更申请表</h2>
							</caption>
						</thead>
	
						<tbody>
							<tr>
								<td valign="center" rowspan="5" colspan="1"
									style=" width:40px;border-width: 1px; border-style: solid;">
									申请人信息
								</td>
								<td valign="center" rowspan="1" colspan="1"
									style=" width:40px;word-break: break-all; border-width: 1px; border-style: solid;">
									姓名
								</td>
	
								<td valign="center" rowspan="1" colspan="1"
									style="word-break: break-all; border-width: 1px; border-style: solid;">
									<input type="text" name="" style="width:90%" id="recordname">
	
								</td>
	
	
							</tr>
	
							<tr>
								<td valign="center" rowspan="1" colspan="1"
									style=" width:40px;border-width: 1px; border-style: solid;">
									身份号码
								</td>
								<td valign="center" rowspan="1" colspan="1"
									style="word-break: break-all; border-width: 1px; border-style: solid;">
									<input type="text" name="" id="idNumber" style="width:90%">
	
								</td>
	
	
							</tr>
							<tr>
								<td valign="center" rowspan="1" colspan="1"
									style=" width:40px;border-width: 1px; border-style: solid;">
									管理单位
								</td>
	
	
								<td valign="center" rowspan="1" colspan="1"
									style=" width:40px;border-width: 1px; border-style: solid;">
	
								</td>
	
	
							</tr>
	
							<tr>
								<td valign="center" rowspan="1" colspan="1"
									style=" width:40px;border-width: 1px; border-style: solid;">
									家庭详细住址
								</td>
								<td valign="center" rowspan="1" colspan="1"
									style="word-break: break-all; border-width: 1px; border-style: solid;">
	
								</td>
	
							</tr>
							<tr>
								<td valign="center" rowspan="1" colspan="1"
									style=" width:40px;border-width: 1px; border-style: solid;">
									联系电话
								</td>
								<td valign="center" rowspan="1" colspan="1"
									style="word-break: break-all; border-width: 1px; border-style: solid;">
	
								</td>
							</tr>
	
							<tr>
								<td valign="center" rowspan="1" colspan="1"
									style=" width:40px;border-width: 1px; border-style: solid;">
									联系电话
								</td>
								<td valign="center" rowspan="1" colspan="2"
									style="word-break: break-all; border-width: 1px; border-style: solid;">
									<div class="bankBox">
										<p>齐鲁银行</p>
										<p>中信银行</p>
										<p>建设银行</p>
										<p>农业银行</p>
										<p>北京银行</p>
										<p>民生银行</p>
									</div>
									<p>申请人签字:</p>
									<div class="date">
										<p>年</p>
										<p>月</p>
										<p>日</p>
									</div>
	
								</td>
	
							</tr>
							<tr class="last">
								<td valign="center" rowspan="1" colspan="3" style="border-width: 1px; border-style: solid;">
	
									<div class="contentBox">
										<h2>申请变更银行回执</h2>
										<div class="container">
											<p>退休人员申请变更代发银行后，由单位或劳动保障中心经办</p>
											<p class="txt1">人员在每月23日上午9点至11点(遇节假日顺延)，到历城社保  </p>
											<p class="txt2">办领取存折。</p>
	
										</div>
	
										<p class="p1">申请人签字:</p>
	
										<div class="footer">
											<p class="p3">
												企业或保障中心章：
	
											</p>
											<p class="p2">社保经办机构章:</p>
	
	
											<p class="p4"> &nbsp;&nbsp; 年 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 月
												&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 日</p>
	
	
										</div>
	
	
	
									</div>
								</td>
	
	
							</tr>
	
						</tbody>
	
					</table>
					<div class="ftBox" id="ftBox" style="display: none;margin-top: 90px;">
                               
					</div>
					<div class="btn_box">
			  
						<div class="layui-btn" id="btnPrint">
						   打印
						</div>
						<!-- <div class="layui-btn" id="btnBack">
							返回
						</div> -->
			
					</div>
	
				</form>
			</div>
	
		</div>

	</div>

	<!--js逻辑-->
	<script src="../../../lib/layui/layui.js"></script>
	<script src="../../../plugins/jquery/jquery-2.1.0.js"></script>
    <script src="../../../plugins/jquery/jQuery.print.js"></script>
    <script src="../../../js/print.js"></script>

    <script type="text/javascript" src="../../../lib/loading/okLoading.js"></script>

	<script>
		layui.use(["element", "table", "form", "jquery", "laydate", "okLayer", "okUtils"], function () {
			let table = layui.table;
			let form = layui.form;
			let laydate = layui.laydate;
			let okLayer = layui.okLayer;
			let okUtils = layui.okUtils;
			let $ = layui.jquery;
			okLoading.close($);

			okUtils.ajax("../../../data/navs.json", "get", true).done(function (res) {
                    console.log(res)
                    var usernameVal = res.data[0].recordname
                    console.log(usernameVal)
                    var idVal = res.data[0].idnumber
                    var textVal = res.data[0].title
                    var sexVal = res.data[0].sex
                    var addtVal = res.data[0].address
                    var txVal = res.data[0].tuixiutime
                    var lbVal = res.data[0].leibie


                    


                    $("#recordname").val(usernameVal);
                    $("#idNumber").val(idVal);
                    $("#txt").val(textVal);
                    $("#address").val(addtVal);
                    $("#sex").val(sexVal);
                    $("#txtime").val(txVal);
                    $("#lbVal").val(lbVal);




                    }).fail(function (error) {
                    console.log(error)
	             	});
         

		})
	</script>

</body>

</html>